<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 网站图标 -->
  <link rel="shortcut icon" href="images/1.png" type="image/x-icon" />

  <link rel="stylesheet" href="./css/style.css">

  <!-- ! bootstrap4基本所需css/js引入 -->
  <link rel="stylesheet" href="./lib/css/bootstrap.css">
  <!-- zico图标库引入 -->
  <link rel="stylesheet" href="./lib/css/zico.min.css">
  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="./lib/js/jquery-3.5.1.min.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <!-- ! popover提示框组件依赖 Popper.js 进行定位，在必须引入 popper.min.js 在bootstrap.js脚本之前，
       ! 或者使用bootstrap.bundle.min.js / bootstrap.bundle.js（这两个脚本中已经包含了Popper.js可以直接运行弹出提示框）
  -->
  <script src="./lib/js/bootstrap.bundle.js"></script>

  <script src="js/main.js"></script>

</head>

<body>
  <!-- --------------------------------header start---------------------------------------- -->
  <header id="webHeader">
    <!-- 上半部分 -->
    <!-- d-none==>display:none(隐藏) 注意，只写一个d-none表示无论什么屏幕大小下都会隐藏 -->
    <!-- d-md-block 表示在屏幕为中等屏幕和以上时，display:block(显示)，此时展示出来，而小于中等屏幕的小屏幕那些就会因为d-none而隐藏起来 -->
    <!-- text-center 文本居中  text-muted 文字颜色灰色-->
    <div class="top-bar d-none d-lg-block text-center text-muted">
      <div class="container">
        <div class="row">
          <div class=" top-bar-1 col-md-2">
            <a href="#" class="text-muted">
              <i class="zi zi_tmWeixin"></i>
              <span>关注微信</span>
              <img src="./images/1.png" alt="" style="width: 120px;">
            </a>
          </div>
          <div class=" top-bar-2 col-md-5">
            <i class="zi zi_phone"></i>
            <span>123456789xxxxx（服务时间：8：00-22：00）</span>
          </div>
          <div class=" top-bar-3 col-md-2">
            <a href="#">
              校企合作
            </a>
            <a href="#">
              培训师
            </a>
          </div>
          <div class=" top-bar-4 col-md-3 d-flex align-items-center">
            <a href="#" class="btn btn-cj btn-sm">免费注册</a>
            <!-- <button type="button" class="btn btn-primary btn-sm">免费注册</button> -->
            <a href="#" class="ml-3 text-muted">立即登录</a>
          </div>
        </div>
      </div>
    </div>

    <!-- 下部分 -->
    <!-- navbar-expand-lg：.navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)，
      例如设置成lg，那就代表屏幕宽度超过992px就让导航栏水平铺开，小于则进行折叠展示 
    -->
    <!-- bg-light：表明背景颜色是浅色的，那么bootstrap会自动设置字体颜色是深色的，
      如果设置navbar-dark，这代表背景颜色是深色的，那么bootstrap会自动设置字体颜色（navbar-light）是浅色的，
      当然深色和浅色并不是白色和黑色，例如蓝色和红色，以及绿色都是深色的，背景颜色通过bg-*来设置 
      一般bg-dark，那navbar-dark就将文字设为在dark下明显的样式
      也就是说  bg-dark navbar-dark 联合使用，若不写navbar-dark，则字体样式会是蓝色
    -->

    <!-- 这是导航栏的外部宽度，container写在这个里面，否则整个导航栏宽度都会缩短 -->
    <nav class="navbar navbar-expand-lg  bg-white navbar-light navber-cj">
      <div class="container">

        <!-- <a class="navbar-brand" href="#">Navbar</a> -->
        <a class="navbar-brand d-flex align-items-center justify-content-center" href="#">
          <img src="images/logo.gif" />
        </a>
        <!--创建折叠导航栏，可以在按钮上添加 class="navbar-toggler", data-toggle="collapse" 与 data-target="#thetarget"类，
          div（button下方的div元素）元素上的 id 匹配按钮 data-target 的上指定的 id-->
        <!-- 只能修改下id，data-toggle="collapse"别去动它 -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-cj"
          aria-controls="navbar-cj" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <!--在设置了 class="collapse navbar-collapse" 类的 div 上包裹导航内容（链接）, 
          div 元素上的 id 匹配上面button按钮 data-target 的上指定的 id
         -->
        <div class="collapse navbar-collapse" id="navbar-cj">
          <!--navbar-nav：必备的；mr-auto：margin-right:auto-->
          <ul class="navbar-nav mr-auto">
            <!--active：代表被选中-->
            <li class="nav-item active">
              <a class="nav-link" href="#">首页</a>
            </li>

            <!--dropdown：指定一个下拉菜单-->
            <li class="nav-item dropdown">
              <!--dropdown-toggle和data-toggle="dropdown：使用一个按钮或链接来打开下拉菜单-->
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                学科学习
              </a>
              <!-- 实际的下拉菜单数据 -->
              <!--dropdown-menu：来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类-->
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Web前端+全栈</a>
                <!--! dropdown-divider：用于在下拉菜单中创建一个水平的分割线-->
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Python+人工智能</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">JavaEE+大数据</a>
              </div>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="#">服务体系</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">软件工具</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">专题学习</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">就业指导</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <!-- --------------------------------header end---------------------------------------- -->

  <!-- --------------------------------轮播图start---------------------------------------- -->
  <!--! 轮播图实现思路：如果是电脑屏幕比较大，那就使用一张大图片作为div的背景图片；
        如果是手机屏幕或者平板屏幕比较小，那就使用一张小图片作为div中的img标签，
    所以美工需要给我提供两张图片，我们通过下面的data-属性去往后端传值，不然在遍历的时候无法确定该div中应该展示哪种图片，该div把自己用到的送过去了，那就不会错的
  -->
  <!-- 轮播图本来是这样的 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 
  但是我们这里用了section了，可以不用div，所以把  class="carousel slide" data-ride="carousel" 写在section里面，同时控制轮播的id用section的id就行了
  -->
  <section id="web-carousel" class="carousel slide " data-ride="carousel">
    <!-- 这个ol就是轮播图上的小点/横杠 -->
    <ol class="carousel-indicators">
      <!--给横杠添加 active：将 .active 样式添加到其中一个幻灯片的小图标上（一般第一张），否则轮播效果将无法正常运行（展现）-->
      <li data-target="#web-carousel" data-slide-to="0" class="active"></li>
      <li data-target="#web-carousel" data-slide-to="1"></li>
      <li data-target="#web-carousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <!--! data用于存储数据，然后向前端脚本传入数据，我们在后面可以使用data()方法取出相应的值，
        可以搜索jQuery data()，前端脚本中的data()中的值不用带上data-，只要后面的就可以了
      -->
      <!--给轮播图的图片添加 active：（一般第一张），否则轮播效果将无法正常运行（展现）-->
      <div class="carousel-item active" data-lg-img="images/lunbo/big/1_2000x410.jpg"
        data-sm-img="images/lunbo/small/1_640x340.jpg">
        <!-- <img src="images/lunbo/big/1_2000x410.jpg" /> -->
      </div>
      <div class="carousel-item" data-lg-img="images/lunbo/big/2_2000x410.jpg"
        data-sm-img="images/lunbo/small/2_640x340.jpg">
        <!-- <img src="images/lunbo/big/2_2000x410.jpg" /> -->
      </div>
      <div class="carousel-item" data-lg-img="images/lunbo/big/3_2000x410.jpg"
        data-sm-img="images/lunbo/small/3_640x340.jpg">
        <!-- <img src="images/lunbo/big/3_2000x410.jpg" /> -->
      </div>
    </div>
    <!--在小按钮上添加id是为了让屏幕宽度 在平板宽度及其以下屏幕上隐藏它们，然后在屏幕宽度在平板以上就显示它们-->
    <a id="prev" class="carousel-control-prev" href="#web-carousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a id="next" class="carousel-control-next" href="#web-carousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </section>
  <!-- --------------------------------轮播图end---------------------------------------- -->

  <!-- --------------------------------热门start---------------------------------------- -->
  <section id="webHot">
    <!-- 标题 -->
    <div class="text-center mt-4 mb-3">
      <h2><strong>热门课程</strong></h2>
      <img src="images/star.png" />
    </div>

    <div class="container">
      <!--row：栅格/网格系统，有行才有列-->
      <div class="row">

        <div class="col-md-6 col-lg-4">
          <!--
							! media：设置多媒体对象 用于图文混排，多用于博客评论中
							d-flex：display:flex，设置弹性盒子
							align-items-center：子元素垂直居中
							mb-3：代表margin-bottom，那mt、ml、mr你也就知道了，3只是一个宽度单位
							p-2：p代表padding，后面的数字是宽度单位，当然你还可以使用pb-*，这就是padding-bottom
							了解更多多媒体对象知识请看：https://www.runoob.com/bootstrap4/bootstrap4-media-objects.html
						-->
          <div class="media d-flex align-items-center mb-3 p-2">
            <!--
								! rounded-circle：设置椭圆形图片
								img-thumbnail：设置图片缩略图，即让图片产生边框
								img-fluid：设置响应式图片，即设置了 max-width: 100%;和height: auto;
								mr-2：margin-right，其中2是单位，代表一种宽度，还可以是3、4等等
            -->
            <!-- 媒体对象的图片部分 -->
            <img src="images/gxq.jpg" class="rounded-circle img-thumbnail  mr-2" width="100">
            <!--media-body：子容器需要添加media-body类，所以不能少-->
            <div class="media-body">
              <h6>
                <!--text-danger：设置字体颜色，这是红色的-->
                <span class="text-danger">【热】</span>
                Javascript高级+设计模式
              </h6>
              <!--text-muted：设置字体颜色，这是淡灰色的-->
              <p class="text-muted">原型链、设计模式、面向对象</p>
            </div>
          </div>
        </div>
        <!--class解释和上面的一致，不在赘述-->
        <div class="col-md-6 col-lg-4">
          <div class="media d-flex align-items-center mb-3 p-2">
            <img src="images/lnj.png" class="rounded-circle img-thumbnail img-fluid mr-2" width="100">
            <div class="media-body">
              <h6>
                <span class="text-success">【新】</span>
                Python项目实战-PYQT5
              </h6>
              <p class="text-muted">368个课时打造最全QT</p>
            </div>
          </div>
        </div>
        <!--class解释和上面的一致，不在赘述-->
        <div class="col-md-6 col-lg-4">
          <div class="media d-flex align-items-center mb-3 p-2">
            <img src="images/wzs.png" class="rounded-circle img-thumbnail img-fluid mr-2" width="100">
            <div class="media-body">
              <h6>
                <span class="text-warning">【战】</span>
                JavaEE-SSH三大框架
              </h6>
              <p class="text-muted">就业实战第一篇</p>
            </div>
          </div>
        </div>
        <!--class解释和上面的一致，不在赘述-->
        <div class="col-md-6 col-lg-4">
          <div class="media d-flex align-items-center mb-3 p-2">
            <img src="images/yjh.png" class="rounded-circle img-thumbnail img-fluid mr-2" width="100">
            <div class="media-body">
              <h6>
                <span class="text-info">【战】</span>
                Vue+Node拼多多项目实战
              </h6>
              <p class="text-muted">打通前后端，连接数据库</p>
            </div>
          </div>
        </div>
        <!--class解释和上面的一致，不在赘述-->
        <div class="col-md-6 col-lg-4">
          <div class="media d-flex align-items-center mb-3 p-2">
            <img src="images/wzs.png" class="rounded-circle img-thumbnail img-fluid mr-2" width="100">
            <div class="media-body">
              <h6>
                <span class="text-danger">【火】</span>
                JavaEE-SSH综合项目应用
              </h6>
              <p class="text-muted">博客系统前后端统一部署</p>
            </div>
          </div>
        </div>
        <!--class解释和上面的一致，不在赘述-->
        <div class="col-md-6 col-lg-4">
          <div class="media d-flex align-items-center mb-3 p-2">
            <img src="images/gxq.jpg" class="rounded-circle img-thumbnail img-fluid mr-2" width="100">
            <div class="media-body">
              <h6>
                <span class="text-danger">【热】</span>
                H5+C3从入门到贯通
              </h6>
              <p class="text-muted">8大案例全程驱动教学</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- --------------------------------热门end---------------------------------------- -->

  <!-- --------------------------------产品start---------------------------------------- -->
  <section id="webProduct">
    <div class="container">
      <!--选项卡（滑动门）nav-->
      <!-- 选项卡部分 -->
      <nav style="overflow: auto;">
        <div class="nav nav-tabs " id="productTab" role="tablist">
          <a class="nav-item nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
            aria-controls="home" aria-selected="true">在线大学</a>
          <a class="nav-item nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
            aria-controls="profile" aria-selected="false">会员专享</a>
          <a class="nav-item nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab"
            aria-controls="contact" aria-selected="false">优质视频</a>
          <a class="nav-item nav-link " id="home-tab1" data-toggle="tab" href="#home" role="tab" aria-controls="home"
            aria-selected="true">在线大学</a>
          <a class="nav-item nav-link" id="profile-tab1" data-toggle="tab" href="#profile" role="tab"
            aria-controls="profile" aria-selected="false">会员专享</a>
          <a class="nav-item nav-link" id="contact-tab1" data-toggle="tab" href="#contact" role="tab"
            aria-controls="contact" aria-selected="false">优质视频</a>
          <a class="nav-item nav-link " id="home-tab12" data-toggle="tab" href="#home" role="tab" aria-controls="home"
            aria-selected="true">在线大学</a>
          <a class="nav-item nav-link" id="profile-tab12" data-toggle="tab" href="#profile" role="tab"
            aria-controls="profile" aria-selected="false">会员专享</a>
          <a class="nav-item nav-link" id="contact-tab12" data-toggle="tab" href="#contact" role="tab"
            aria-controls="contact" aria-selected="false">优质视频</a>
        </div>
      </nav>
    </div>
    <!-- 对应选项卡的可切换部分 -->
    <div class="tab-content" id="myTabContent">
      <!--
          active：这个div会首次显示在页面上
          id="home"：对应上面的a标签中的href="#home"
          aria-labelledby="home-tab" 对应a标签中的id
      -->
      <!-- !在线大学选项卡内容部分 -->
      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <div class="container">
          <div class="row">
            <div class="col-md-8">
              <!--第一部分-->
              <!--
                  d-none：默认display:none；
                  d-lg-block：当屏幕宽度大于992px的时候，display变成block
              -->
              <div class="mt-3 d-none d-md-block">
                <a href="javascript:;">
                  <img src="images/ewm_xzh.jpg" width="140" />
                </a>
                <div class="text-muted ml-2 mt-3 mb-3">
                  <div>更多资讯欢迎</div>
                  <div>关注撩课学院</div>
                </div>
              </div>
              <!--第二部分-->
              <div class="breadcrumb lead d-none d-lg-block">
                <strong>HTML5+全栈 / Python+人工智能 / JAVAEE+大数据</strong>
              </div>
              <!--第三部分-->
              <h1>
                <strong>
                  欢迎来到IT人的在线大学
                  <span class="text-danger">/</span>
                  撩课学院
                  <span class="text-danger">/</span>
                </strong>
              </h1>
              <!--第四部分-->
              <div class="mt-4">
                <!--btn-lg：设置大图标，比普通图标大，对应的是btn-sm，这是比普通图标小-->
                <button class="btn btn-primary btn-lg" type="submit">课程咨询</button>
                <button class="btn btn-lg" type="submit">了解更多</button>
              </div>
            </div>
            <div class="col-md-4">
              <img src="images/iphoneX.png" class="img-fluid mt-3 d-none d-lg-block" />
            </div>
          </div>
        </div>
      </div>

      <!-- !会员专享选项卡内容部分 -->
      <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
        <div class="container">
          <div class="row">
            <div class="col-md-4 mt-3">
              <img src="images/iphoneX2.png" class="d-none d-lg-block" />
            </div>
            <div class="col-md-8 mt-3">
              <h1 class="text-warning">撩课学院会员</h1>
              <!--lead：增大文本字号，加粗文本，而且对行高和margin也做相应的处理，目的是想让一个段落p突出显示-->
              <p class="lead mt-4">
                汇聚名师，为你呈现前端、后端、移动端、大数据、人工智能等从零基础到项目实战
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- !优质视频选项卡内容部分 -->
      <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
        <div class="container">
          <div class="row">
            <div class="col-md-6">
              <h1 class="mt-3">
                <strong class="text-danger">
                  案例驱动 • 体系贯穿 • 全面系统
                </strong>
              </h1>
              <h3 class="mt-3">
                10-15分钟的视频
                <span class="text-warning">知识点拆分讲解</span>
              </h3>
              <br />
              <h4 class="text-muted d-none d-lg-block" style="margin: 15px 0;">
                玩转HTML5+全栈系列<br /><br />
                玩转Python+人工智能系列<br /><br />
                玩转JavaEE+大数据系列<br /><br />
              </h4>
              <div>
                <button class="btn btn-success btn-lg" type="submit" style="margin-right: 10px;">
                  立即学习
                </button>
              </div>
            </div>
            <div class="col-md-6 d-none d-lg-block">
              <img src="images/macBook.png" width="100%" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- </div> -->
  </section>
  <!-- --------------------------------产品end---------------------------------------- -->

  <!-----------------关于我们-begin（没使用模板 ）----------------->
  <section id="webAbout">
    <!--标题-->
    <div class="text-center mt-4 mb-3">
      <h2><strong>关于我们</strong></h2>
      <img src="images/star.png" />
    </div>
    <!--内容-->
    <div class="container mb-4">
      <div class="row">
        <!--  order-lg-1 超大屏时 排序将文字放在第一位 也就是左侧 -->
        <!-- order-2 默认不是超大屏时，文字排序为第二位，也就是放在下方 -->
        <div class="col-lg-8 order-2 order-lg-1">
          <p class="text-muted">
            撩课学院是秣码教育旗下线上教育品牌。成立于2017年06月，集聚强大的IT讲师资源，独特的课程服务模式，通过M2O等新型教育方式，真正解决开发者在成长过程中的各种技术瓶颈，帮助学生在IT职场取得成功。</p>
          <p class="text-muted"> 撩课学院明星讲师云集，包括李南江、叶建华、王顺子、高新强等十几位专业实战型讲师团队，悉心打造六大综合体系课程，细致且全面，全面助力学生成长。</p>
          <p class="text-muted">撩课学院课程体系完善，包含HTML5+全栈开发、Python+人工智能、JavaEE、Go语言+区块链、UI/UE设计、新媒体、电商运营等系列课程。</p>
        </div>
        <!--  order-lg-2 超大屏时 排序将图片放在第二位 也就是右侧 -->
        <!-- order-1 默认不是超大屏时，图片排序为第一位，也就是放在上方 -->
        <div class="col-lg-4 order-1 order-lg-2 mb-3 mb-lg-0 ">
          <img src="images/team.png" width="100%" class="img-fluid rounded" />
        </div>
      </div>
    </div>
  </section>
  <!-----------------关于我们-end----------------->

  <!-- --------------------------------友情链接start---------------------------------------- -->
  <section id="webFriendLink" class="d-none d-md-block">
    <!--标题-->
    <div class="text-center mt-4 mb-3">
      <h2><strong>友情链接</strong></h2>
      <img src="images/star.png" />
    </div>
    <!--内容-->
    <div class="container mb-4">
      <!--
            row：设置一行，只有行才有列
            d-flex：display:flex，设置弹性盒子
            justify-content-around：分散对齐，两个子元素的间隔相等，并且最边缘的子元素和边缘还有一定的距离，这个距离是子元素之间间隔的1/2
            align-items-center：子元素垂直局中对齐
          -->
      <div class="row d-flex justify-content-around align-items-center">
        <a href="javascript:;"><img src="images/ibm-logo.png" width="100" /></a>
        <a href="javascript:;"><img src="images/facebook-logo.png" width="50" /></a>
        <a href="javascript:;"><img src="images/google-logo.png" width="50" /></a>
        <a href="javascript:;"><img src="images/airbnb-logo.png" width="100" /></a>
        <a href="javascript:;"><img src="images/swift-logo.png" width="50" /></a>
        <a href="javascript:;"><img src="images/paypal-logo.png" width="100" /></a>
        <a href="javascript:;"><img src="images/walmart-logo.png" width="100" /></a>
      </div>
    </div>
  </section>
  <!-- --------------------------------友情链接end---------------------------------------- -->

  <!-- --------------------------------footer start---------------------------------------- -->
  <footer id="webFooter">
    <div class="container">
      <div class="row d-flex justify-content-center align-items-center">
        <!--col-lg-4 d-none d-lg-block：默认隐藏，当屏幕宽度等于或大于 992px的时候，占据 12列中的4列，并且显示出来，
          如果屏幕宽度小于992px，就隐藏自身
        -->
        <div class="col-lg-4 d-none d-lg-block">
          <!--在row里面设置row，这是第一次这样做-->
          <div class="row d-flex align-items-center">
            <!--offset-lg-2：.offset-*用于栅格偏移，可以使列向右偏移，也就是左边空出几列，
              栅格系统有12列，也就是该li最左边有2列的宽度，其中lg就是宽度限制，只有大屏幕和超大屏幕时才会向右偏移，否则不会偏移
            -->
            <ul class="offset-lg-2 col-lg-4">
              <li>
                <a href="javascript:;">关于我们</a>
              </li>
              <li>
                <a href="javascript:;">课程介绍</a>
              </li>
              <li>
                <a href="javascript:;">热门课程</a>
              </li>
            </ul>
            <!--你可以发现上面用了6列，这里用了4列，一共10列，不够12列，其实右边其实也默认有两列，还是12列，不多不少-->
            <ul class="col-lg-4">
              <li>
                <a href="javascript:;">名师互动</a>
              </li>
              <li>
                <a href="javascript:;">课堂互动</a>
              </li>
              <li>
                <a href="javascript:;">联系我们</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-md-6 col-lg-4 text-center">
          <h6>公司地址：上海市松江区松江大学城</h6>
          <h6>联系电话：666666</h6>
          <h6>地址邮箱：2324353454@163.com</h6>
        </div>
        <div class="col-md-6 col-lg-4 d-none d-md-block text-center">
          <h6>联系我们：</h6>
          <a href="javascript:;">
            <!-- 提示冒泡(Tooltip) -->
            <!-- ! data-toggle="tooltip" data-placement="bottom" title="关注微信"：这是提示框的内容，另外还需要用到javascript，这在main.js中写着-->
            <img src="images/weixin-h.png" width="50" data-toggle="tooltip" data-placement="bottom" title="关注微信" />
          </a>
          <a href="javascript:;">
            <img src="images/xinlang-h.png" width="50" data-toggle="tooltip" data-placement="bottom" title="关注微博" />
          </a>
        </div>
      </div>
    </div>
  </footer>
  <!-- --------------------------------footer end---------------------------------------- -->
</body>

</html>